<template>
  <div>
    <div class="flex titleRow">
      <div class="title fs4">选择办理人</div>
    </div>
    <van-search v-model="value" placeholder="搜索"/>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="中国移动通信集团1" name="1">
        <van-collapse-item title="信息技术部1" name="11">
          <van-radio-group v-model="radio1" class="radioGroup1">
            <van-radio name="1" class="radio">丁冬芹</van-radio>
            <van-radio name="2" class="radio">孙立军</van-radio>
            <van-radio name="3" class="radio">张亮</van-radio>
          </van-radio-group>
        </van-collapse-item>
        <van-collapse-item title="信息技术部2" name="12">
          <van-collapse-item title="安全" name="121">
            <van-radio-group v-model="radio2" class="radioGroup2">
              <van-radio name="1" class="radio">贾大林</van-radio>
              <van-radio name="2" class="radio"> 折为成</van-radio>
              <van-radio name="3" class="radio">孙成红</van-radio>
            </van-radio-group>
          </van-collapse-item>
        </van-collapse-item>
      </van-collapse-item>
      <van-collapse-item title="中国移动通信集团2" name="3">
        <van-radio-group v-model="radio3" class="radioGroup">
          <van-radio name="1" class="radio">刘安1</van-radio>
          <van-radio name="2" class="radio"> 刘安2</van-radio>
          <van-radio name="3" class="radio">刘安3</van-radio>
        </van-radio-group>
      </van-collapse-item>
    </van-collapse>
    <div class="fixedBottom pink flex textAlignCenter">
      <div class="left" @click="cancel">取消</div>
      <div class="right" @click="ok">确定</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Search} from 'vant';
import {Collapse, CollapseItem} from 'vant';
import {RadioGroup, Radio} from 'vant';

Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Search);
export default {
  name: "selectHander",
  data() {
    return {
      value: '',
      activeNames: ['1'],
      radio1: '1',
      radio2: '1',
      radio3: '1',
    }
  },
  methods:{
    ok(){
      this.$router.back();
    },
    cancel(){
      this.$router.back();
    }
  }
}
</script>

<style lang="less" scoped>
.titleRow {
  background-color: #F5F5F5;
  padding: .4rem;
  color: #5e5e5e;
}

.radio {
  padding: .2rem 0;
}

.fixedBottom {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  .left,.right{
    width: 50%;
    font-size: .4rem;
    padding: .4rem 0;
  }
  .left{
    background-color: #fff;
    color: #5e5e5e;
  }
  .right{
    background-color: #409EFF;
    color: #fff;
  }
}
</style>